import React from 'react'
import {Input ,Radio ,Select ,Button ,Upload ,Icon,message} from 'antd';
import './index.less';
import axios from 'axios';
import {PATH, IP, URL} from '../../../../utils/urls';
const { Option } = Select;
import BreadcrumbCustom from "../../../../components/BreadcrumbCustom";
const props = {
    listType: 'picture',
    defaultFileList: [],
};
export default class ChangeAreaScene extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id:"",//当id为空时，为新建区域场景，当不为空时为编辑区域底图
            sceneIcon:"",//场景icon
            sceneImg:"",//场景底图
            sceneWarnIcon:"",//场景预警图标
            sceneName:"",
            sceneStatus:0,//场景状态1启用 0未启用
            locationX:0,
            locationY:0
        };
    }

    componentDidMount() {
        console.log(this.props);
        let areaId = "";
        if(this.props.location.state != null){
            areaId=this.props.location.state.id?this.props.location.state.id:"";
        }else{
            areaId = ""
        }

        this.setState({
            id:areaId
        })
        console.log(this.state);
    }

    /**
     *场景底图上传
     * @returns {*}
     */
    onChangeSceneImg=({file})=>{
        if (file.status !== 'uploading') {
            const formata = new FormData;
            formata.append("file",file.originFileObj);
            axios.post(PATH.uploadFile,formata)
                .then(response=>{
                    console.log(response);
                    if(response.data.code == 0){
                        this.setState({
                            sceneImg : URL+response.data.url
                        })
                    }
                    console.log(this.state);
                })
        }
    }

    /**
     *场景icon上传
     * @returns {*}
     */
    onChangeSceneIcon=({file})=>{
        if (file.status !== 'uploading') {
            console.log(file);
            const formata = new FormData;
            formata.append("file",file.originFileObj);
            axios.post(PATH.uploadFile,formata)
                .then(response=>{
                    if(response.data.code == 0){
                        this.setState({
                            sceneIcon : URL+response.data.url
                        })
                    }
                    console.log(this.state);
                })
        }
    }

    /**
     *场景预警icon上传
     * @returns {*}
     */
    onChangeSceneWarnIcon=({file})=>{
        if (file.status !== 'uploading') {
            console.log(file);
            const formata = new FormData;
            formata.append("file",file.originFileObj);
            axios.post(PATH.uploadFile,formata)
                .then(response=>{
                    if(response.data.code == 0){
                        this.setState({
                            sceneWarnIcon : URL+response.data.url
                        })
                    }
                    console.log(this.state);
                })
        }
    }

    /**
     * 点击提交
     */
    onSubmit=()=>{
        console.log(this.state);
        let path = "";
        if(this.state.id == ""){
            path = PATH.addAreaScene;
        }else{
            path = PATH.editAreaScene;
        }
        axios.post(path,this.state).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                message.success(response.data.msg)
            }else{
                message.error(response.data.msg);
            }
        })
    }

    /**
     * 输入框改变
     * @returns {*}
     */
    inputChange = (event)=>{
        if(event && event.target && event.target.value ){
            switch (event.target.id) {
                case "areaSceneName":
                    this.setState({
                        sceneName:event.target.value
                    })
                    break;
                case "areaSceneX":
                    this.setState({
                        locationX:event.target.value
                    })
                    break;
                case "areaSceneY":
                    this.setState({
                        locationY:event.target.value
                    })
                    break;
            }
        }
    }

    render() {
        return (
            <div className="changeAreaAllContent">
                <BreadcrumbCustom first="场景配置" second="区域场景" />
                <div className="resourceContentCell">
                    <div className="changeTitle">场景名称:</div>
                    <Input id="areaSceneName" onChange={event => this.inputChange(event)} className="changeCell" placeholder="场景名称"/>
                </div>
                <div className="resourceContentCell">
                    <div className="changeTitle">场景底图:</div>
                    <Upload {...props} className="areaLoadScene" onChange={this.onChangeSceneImg}>
                        <Button>
                            <Icon type="upload" /> 上传
                        </Button>
                        <span className="areaLoadSceneMsg">请使用svg格式</span>
                    </Upload>

                </div>
                <div className="resourceContentCell">
                    <div className="changeTitle">场景图标:</div>
                    <Upload {...props} className="areaLoadScene" onChange={this.onChangeSceneIcon}>
                        <Button>
                            <Icon type="upload" /> 上传
                        </Button>
                        <span className="areaLoadSceneMsg">请使用svg格式</span>
                    </Upload>
                </div>
                <div className="resourceContentCell">
                    <div className="changeTitle">预警图标:</div>
                    <Upload {...props} className="areaLoadScene" onChange={this.onChangeSceneWarnIcon}>
                        <Button>
                            <Icon type="upload" /> 上传
                        </Button>
                        <span className="areaLoadSceneMsg">请使用svg格式</span>
                    </Upload>
                </div>
                <div className="resourceContentCell">
                    <div className="changeTitle">图标尺寸:</div>
                    <div className="changeCell3 changeCellX">X</div>
                    <Input id="areaSceneX" onChange={event => this.inputChange(event)} className="changeCell2" placeholder="X" />
                    <div className="changeCell3 changeCellX">Y</div>
                    <Input id="areaSceneY" onChange={event => this.inputChange(event)} className="changeCell2" placeholder="Y" />
                    <div className="changeCell3">像素</div>
                </div>
                <div className="resourceContentCell changeHardBtnDiv">
                    <Button className="changeHardBtn" onClick={this.onSubmit}>保存</Button>
                </div>
            </div>
        )
    }
}